<template>
  <div class="wrap">
    <div class="main">
      <div v-if="resFansUserList.length > 0">
        <div class="item" v-for="(item, index) in resFansUserList" :key="index">
          <img
            :src="$imgUrl + item.headImage"
            alt=""
            class="headImg"
            @click="jumpForumPersonCenter(item.id)"
          />
          <div class="userInfo">
            <div class="name">
              <em>{{ item.nickName }}</em>
              <img src="@/assets/sex.png" class="sex" v-if="item.sex == 0" />
              <img src="@/assets/sex2.png" class="sex" v-if="item.sex == 1" />
            </div>
          </div>
          <div
            class="attention"
            @click="changeAttion(item.id, item.isFollow)"
            :class="{ attentionActive: !item.isFollow }"
          >
            {{ item.isFollow ? "取消关注" : "关注" }}
          </div>
        </div>
      </div>
      <div
        v-else
        style="font-size: 12px; color: #181818; margin-left: 15px; margin-top: 20px"
      >
        暂无粉丝...
      </div>
    </div>
  </div>
</template>

<script>
import { Switch } from "vant";
import { apiFansUserList, apiCancel, apiAdd } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      resFansUserList: [],
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getFansUserList();
  },
  methods: {
    //获取粉丝列表
    getFansUserList() {
      apiFansUserList({
        id: JSON.parse(localStorage.getItem("loginInfo")).userId,
      }).then((res) => {
        this.resFansUserList = res.data;
        console.log("resFansUserList", this.resFansUserList);
      });
    },
    //取消关注
    getCancel(i) {
      apiCancel({
        toUserId: i,
      }).then((res) => {
        this.getFansUserList();
      });
    },
    //关注
    getAdd(i) {
      apiAdd({
        toUserId: i,
      }).then((res) => {
        this.getFansUserList();
      });
    },
    // 切换关注or取消关注的状态：
      changeAttion(i, isFollow) {
      if (isFollow) {
        //当前是关注状态 操作为取消关注
        this.getCancel(i);
      } else {
        this.getAdd(i);
      }
    },
    //跳转论坛个人主页
    jumpForumPersonCenter(id) {
      this.$router.push({
        path: "/pages/forumPersonalCenter",
        query: {
          userId: id,
        },
      });
    },
  },
  created() {},
  components: {
    [Switch.name]: Switch,
  },
};
</script>

<style scoped>
.main {
  width: calc(95% - 30px);
  margin: 20px auto;
  background-color: #fff;
  border-radius: 20px;
  min-height: calc(100vh - 70px);
  padding: 15px;
}
.item {
  overflow: hidden;
  margin-bottom: 20px;
}
.headImg {
  width: 65px;
  height: 65px;
  border-radius: 65px;
  float: left;
}
.userInfo {
  margin-left: 13px;
  float: left;
  width: calc(100% - 95px - 65px - 13px);
}
.name {
  font-size: 15px;
  font-weight: 500;
  color: #181818;
  margin-bottom: 10px;
  margin-top: 25px;
}
.sex {
  width: 12px;
  height: 12px;
  padding-left: 10px;
}
.attention {
  float: left;
  width: 80px;
  height: 33px;
  line-height: 33px;
  background: #b5b3b2;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  float: right;
  margin-left: 15px;
  margin-top: 15px;
}
.attentionActive {
  background: #181818;
  color: #fff;
}
</style>
